import React, { Component } from 'react';
import { connect } from 'dva';
import { Dispatch, AnyAction } from 'redux';
import { Statistics } from '@/models/connect';
import _ from 'lodash';
import styles from './positionInfoStatistics.css';
import CommList from './commList';
import { produce, Draft } from 'immer';
import router from 'umi/router';
import { positionInfoExport } from '@/services/statistics';
import { positionStatistics } from '@/services/statistics';
import { isMenuVisible } from '@/utils/utils';

interface DrugMeProps {
  statistics?: Statistics;
  loading: boolean;
  dispatch: Dispatch<AnyAction>;
}
class positionInfoStatistics extends Component<DrugMeProps> {
  constructor(props: DrugMeProps) {
    super(props);
    this.state = {
      visible: true,
      drugApi: 'statistics/positionList',
      detailsUrl: '/statistics/details/positionInfoDetails', //跳转路径详情页
      expApi: 'statistics/drugListEx', //导出
      posiStatistics: {},
    };
  }
  data = async () => {
    const [err, data] = await positionStatistics({ deviceTypeNo: this.props.deviceTypeNo });
    if (!err) {
      this.setState(
        produce((draft: Draft<positionInfoStatistics>): void => {
          draft.posiStatistics = data;
        }),
      );
    }
  };
  componentWillMount() {
    if (localStorage.getItem('isTrue')) {
      this.setState({
        visible: false,
      });
    }
    const { dispatch } = this.props;
    this.data();
    // dispatch({ type: 'statistics/drugMedicalStatistics',payload:{deviceTypeNo:this.props.deviceTypeNo} });
    localStorage.removeItem('isTrue');
  }
  render() {
    const { statistics = {} } = this.props;
    return this.state.visible && isMenuVisible('iot:positionInfoLog:statistical') ? (
      <div className={styles['drugRehabilit-container']}>
        <div className={styles['drug-top']}>
          <i>位置信息采集概览</i>
        </div>
        <div className={styles['drug-bottom']} />
        <div className={styles['drug-right']}>
          <div className={styles['drug-right-box']} />
          <div className={`${styles['drug-total']} ${styles['firstBox']}`}>
            今日采集
            <span className={styles['spanRight']}>
              <span className={styles['spanBox']}>{this.state.posiStatistics.dayCount}</span>条
            </span>
          </div>
          <div className={`${styles['drug-total']} ${styles['twoBox']}`}>
            近7天采集
            <span className={styles['spanRight']}>
              <span className={styles['spanBox']}>{this.state.posiStatistics.weekCount}</span>条
            </span>
          </div>
          <div className={`${styles['drug-total']} ${styles['threeBox']}`}>
            信息总数
            <span className={styles['spanRight']}>
              <span className={styles['spanBox']}>{this.state.posiStatistics.everyCount}</span>条
            </span>
          </div>
          <div className={`${styles['drug-total']} ${styles['fourBox']}`}>
            近30天采集
            <span className={styles['spanRight']}>
              <span className={styles['spanBox']}>{this.state.posiStatistics.monthCount}</span>条
            </span>
          </div>
        </div>
        {isMenuVisible('iot:positionInfoLog:list') && (
          <div className={styles['change-box']} onClick={() => this.setState({ visible: false })}>
            <img src={require('@/assets/images/change.png')} alt="" />
          </div>
        )}
      </div>
    ) : (
      <CommList
        drugApi={this.state.drugApi}
        deviceTypeNo={this.props.deviceTypeNo}
        detailsUrl={this.state.detailsUrl}
        name="位置信息列表.xlsx"
        search={'iot:positionInfoLog:businessInfo'}
        menuId={'iot:positionInfoLog:exportList'}
        type={'6'}
        expApi={this.state.expApi}
        commListEx={positionInfoExport}
      />
    );
  }
}
export default connect(({ loading, statistics }: any) => ({
  // loading: loading.effects['statistics/drugMedicalStatistics'],
  statistics: statistics.statistics,
}))(positionInfoStatistics);
